<div class="top-bar" id="mainNavigation">
    <!-- Левая часть -->
    [[# bottomBarLeft ]]

    <!-- Правая часть -->
    <div class="top-bar-right">
        <ul class="menu vertical medium-horizontal">
            <li><input type="search" placeholder="Search"></li>
            <li>
                <button
                    class="button"
                    type="button"
                    data-toggle="example-dropdown-top-right">
                    <i class="ri-menu-add-line"></i>
                </button>
                <div
                    class="dropdown-pane"
                    data-position="top"
                    data-alignment="right"
                    id="example-dropdown-top-right"
                    data-dropdown
                    data-auto-focus="true"
                    data-close-on-click="true">
                    <a href="/user/0" class="clear button">add user</a>
                    <a href="/user/0" class="clear button">add user</a>
                    <a href="/user/0" class="clear button">add user</a>
                    <!--
                        <ul class="vertical menu">
                            <li><a href="/user/0">add user</a></li>
                            <li><a href="/user/2">2</a></li>
                        </ul>
                    -->
                </div>
                <script>
                    $('#example-dropdown-top-right').foundation();
                </script>
            </li>
            <li>
                <a href="/logout" class="button">
                    <i class="ri-logout-box-r-line"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- Всплывающие сообщения пользователю -->
<div style="position: fixed; bottom: 0; right: 0;">
    {{# sessionMessages }}
        <div class="callout {{ type }}" data-closable>
            <h5 class="retejo-session-message-header">{{ caption }}</h5>
            <p>{{ text }}</p>
            <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {{/ sessionMessages }}

    <!-- Всплывающие сообщения удаляются через 5 секунд -->
    <script>
        $(document).ready(function() {
            setTimeout(function() {
                $('.callout').remove();
            }, 5000);
        });
    </script>
</div>
